<template>
    <div style="position:absolute;top:0;left:0;width:100vw;height:100vh;">
        <div style="position:relative;width:100vw;height:100vh;">
            <vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
                :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
                :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed"
                :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox" />
            <div style="position:absolute;bottom:50px;width:100%;border-top:1px solid #323233;">
                <span @click="hidecrop" style="                   
                    display: block;
                    position: absolute;
                    lef: 0;
                    top: 0px;
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    font-weight: 500;
                    font-size: 14px;
                    border-radius: 20px;
                    color: #fff;
                    background: linear-gradient(to right,#ffd01e,#ff8917);
                    background-color: #ff976a;
                    border: 1px solid #ff976a;
                    left:50%;
                    letter-spacing: 5px;
                    transform: translateX(-130px);
                ">取消</span>
                <span @click="finish" style=" 
                    background: linear-gradient(to right, rgb(255, 96, 52), rgb(238, 10, 36));
                    display: block;
                    position: absolute;
                    right: 0;
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    font-weight: 500;
                    font-size: 14px;
                    border-radius: 20px;
                    color: rgb(255, 255, 255);
                    border: 1px solid rgb(238, 63, 0);
                    letter-spacing: 5px;
                    transform: translateX(-70px);
                ">确认</span>                
            </div>
            <van-loading v-show="loading" color="#EE3F00" size="100px" type="spinner"
                style="position:absolute;top:calc(50% - 50px);left:calc(50% - 50px);z-index:200;" />
        </div>
    </div>
</template>
<script>
    import {
        VueCropper
    } from 'vue-cropper';
    import {
        storageUpload
    } from '@/api/api';
    import {
        Loading
    } from 'vant';
    import lrz from 'lrz';

    export default {
        name: 'my-cropper',
        props: ['imgUrl', 'originfilename'], //接到父组件传递过来的图片和文件名称
        data() {
            return {
                navActive: 0,
                loading: false,
                option: {
                    img: this.imgUrl, //裁剪图片的地址
                    originname: this.originfilename, //文件原始全名称 类似a.jpg
                    info: true, //裁剪框大小的信息
                    outputSize: 0.8, //裁剪生成图片的质量
                    outputType: 'jpeg', //裁剪生成图片的格式
                    canScale: false, //图片是否允许滚轮缩放
                    autoCrop: true, //是否默认生成截图框
                    autoCropWidth: 300, //默认生成截图框宽度
                    autoCropHeight: 300, //默认生成截图框高度
                    fixedBox: true, //固定截图框大小  不允许改变
                    fixed: true, //是否开启截图框宽高固定比例
                    fixedNumber: [300, 300], //截图框的宽高比例
                    full: false, //是否输出原图比例的截图
                    canMoveBox: true, //截图框能否拖动
                    original: false, //上传图片按照原始比例渲染
                    centerBox: false, //截图框是否被限制在图片里面
                    infoTrue: true, //true 为展示真实输出图片宽高 false 展示看到的截图框宽高
                },
            };
        },
        watch: {
            imgUrl: function (val) {
                this.option.img = val;
            },
            originfilename: function (val) {
                this.originname = val;
            },
        },
        methods: {
            hidecrop() {
                let that = this;
                let data = {
                    imgUrl: null,
                };
                that.$emit('cropperChange', data);
                that.loading = false;
            },
            finish() {
                let that = this;
                this.loading = true;
                this.$refs.cropper.getCropData((data) => {
                    //将裁剪后base64的图片转化为file格式，并上传至oss
                    let file = this.dataURLtoFile(data);
                    if (file.size < 1048576) {
                        //图片小于1MB不压缩
                        //成功时执行
                        const formData = new FormData();
                        formData.append('file', file);
                        storageUpload(formData)
                            .then((res) => {
                                let data = {
                                    imgUrl: res.data.data.url,
                                };
                                that.$emit('cropperChange', data);
                                that.loading = false;
                            })
                            .catch(() => {});
                    } else {
                        lrz(file, {
                                //width : 300
                                quality: 0.7, //自定义使用压缩方式
                            })
                            .then(function (rst) {
                                //成功时执行
                                storageUpload(rst.formData)
                                    .then((res) => {
                                        let data = {
                                            imgUrl: res.data.data.url,
                                        };
                                        that.$emit('cropperChange', data);
                                        that.loading = false;
                                    })
                                    .catch(() => {});
                            })
                            .catch(function (error) {
                                //失败时执行
                            })
                            .always(function () {
                                //不管成功或失败，都会执行
                            });
                    }
                });
            },
            //将base64图片转换为file文件
            dataURLtoFile(dataurl) {
                var arr = dataurl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], this.originname, {
                    type: mime,
                });
            },
        },

        components: {
            VueCropper,
            Loading,
        },
    };
</script>